<template>
  <el-dialog title="" :close-on-press-escape="true" :close-on-click-modal="true"
             :visible.sync="visible" :modal="true"
             width="60%" append-to-body>
    <el-form class="main" :model="dataForm" size="small" label-width="120px" label-position="left">
      <template v-if="!loading">
        <h2>{{dataForm.title}}</h2>
        <div class="form-top">
          <label>{{dataForm.type}}</label>
          <label>发布时间：{{dataForm.creatorTime}}</label>
        </div>
        <el-col :span="16">
          <jnpf-form-tip-item label="服务商名称：" prop="title">
            <JnpfInput v-model="dataForm.title" :style='{"width":"100%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="16">
          <jnpf-form-tip-item label="截止日期：" prop="endTime">
            <JnpfInput v-model="dataForm.endTime" :style='{"width":"100%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="24">
          <jnpf-form-tip-item label="动态详情：" prop="detail">
            <div class="des"  v-html="dataForm.detail" style="width: 100%;" disabled></div>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="24">
          <jnpf-form-tip-item label="附件：" prop="file">
            <JnpfUploadFile v-model="dataForm.file" v-if="dataForm.file !=null"
                            disabled
                            detailed :fileSize="10" sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0"
                            buttonText="点击上传" :style='{"width":"100%","margin":"15px 0px"}'>
            </JnpfUploadFile>
          </jnpf-form-tip-item>
        </el-col>
      </template>
    </el-form>
  </el-dialog>
</template>

<script>
import axios from 'axios';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Detail3",
  data() {
    return {
      visible: false,
      loading: false,
      title: "",
      dataForm: {
        id: '',
        title: '',
        type: '',
        creatorTime: '',
        endTime: '',
        publisher: '',
        detail: '',
        file: []
      }
    }
  },
  methods: {
    init(id, title) {
      this.dataForm.id = id
      this.title = title
      this.visible = true
      this.loading = true
      const url = `/cloud-api2/portal/serviceProviderDynamicsDetail?id=${id}`;
      axios.get(url).then(res => {
        var data = res.data.data[0]
        this.dataForm.title = data.F_Title;
        this.dataForm.creatorTime = data.F_CreatorTime;
        this.dataForm.type = data.F_Type;
        this.dataForm.endTime = data.F_EndTime;
        this.dataForm.publisher = data.F_Organize;
        this.dataForm.detail = data.F_Description;
        this.dataForm.file = JSON.parse(data.F_Appendix);
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.des{
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 10px 15px;
  min-height: 300px;
}

.el-col{
  padding:15px 20px;
}

.UploadFile-container{
  margin: 0 !important;
}
.el-form-item--small{
  margin-bottom: 5px;
}

::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}

::v-deep .el-dialog {
  max-height: 95%;
  margin: auto;
  overflow-y: auto;
  border-radius: 8px;
  margin-top: 20px !important;
}

::v-deep .el-dialog__body {
  width: 90%;
  margin: 0 auto;
  min-height: 700px;
}

.main {
  position: relative;

  h2 {
    border-bottom: 1px #BBBBBB solid;
    font-size: 20px;
    color: #071838;
    text-align: center;
    line-height: 40px;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .form-top{
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #1890FF;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;

    label{
      margin-right: 20px;
    }
  }

  ::v-deep img {
    max-width: 100%;
  }
}
</style>
